<!doctype html>
<html lang="zh">

<head>
   <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="../asset/css/components.css" />
    <link rel="stylesheet" href="../asset/css/bootstrap.css" />
    <link rel="stylesheet" href="../asset/css/plugins.css" />
    <link rel="stylesheet" href="../asset/css/main.css" />
    <link rel="stylesheet" href="../asset/css/themes.css" />
</head>

<body>
    <div id="body">
       <div id="app">
            <div class="tabbody">
                <div class="bodyli active">
                    <div class="inputbox">
                        <span class="title">用户名</span>
                        <div class="inputright">
                            {{ username }}
                        </div>
                    </div>
                    <div class="inputbox">
                        <span class="title">原始密码</span>
                        <div class="inputright">
                            <input type="password" id="password" v-model="password" class="form-control input-sm" placeholder="请输入原始密码">
                        </div>
                    </div>
                    <div class="inputbox">
                        <span class="title">新密码</span>
                        <div class="inputright">
                            <input type="password" id="newpassword" v-model="newpassword" class="form-control input-sm" placeholder="请输入新密码">
                        </div>
                    </div>
                    <div class="inputbox">
                        <span class="title">确认密码</span>
                        <div class="inputright">
                            <input type="password" id="repassword" v-model="repassword" class="form-control input-sm" placeholder="请输入确认密码">
                        </div>
                    </div>
                    <div class="tbfooter">
                        <button class="btn btn-success" @click.prevent="editpwd()"><i class="fa fa-floppy-o"></i> 提交保存</button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-default" @click.prevent="reset()"><i class="fa fa-recycle"></i> 取消重置</button>
                    </div>
               </div>
            </div>
         </div>
      </div>

    <script type="text/javascript" src="../asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="../asset/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../asset/js/axios.min.js"></script>
    <script type="text/javascript" src="../asset/js/vue.js"></script>
	<script type="text/javascript">
		const vue = new Vue({ // 实例化Vue对象
			el: '#app',// 绑定作用域
			data: { //定义数据 用于vue的双向绑定
				id: '',
				username: '',
				password: '',
				newpassword: '',
				repassword: '',
			},
			methods: {
				editpwd: function () { // 修改按钮点击事件
					let _this = this;
					var data = {
						id: _this.id,
						password: _this.password,
						repassword: _this.repassword,
					};
					axios.post('http://127.0.0.1:8080/equipment/user/edituserpwd.action', data).then(result => {
						alert(result.data.message);
                        window.top.location.href = '../index.html';
					});
				},
				reset: function () { // 重置按钮点击事件
					password = '';
					newpassword = '';
					repassword = '';
				},
				validate: function () { // 验证输入非空

				},
				loadPage: function () { // 页面加载
					this.id = sessionStorage.getItem('id');
					this.username = sessionStorage.getItem('username');
				},
			},
			created() { // 生命周期相关的函数
				this.loadPage();
			},
		})
	</script>

</body>

</html>


